<!--
 * @Author: Aaron
 * @Date: 2022-04-13 15:55:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-25 15:33:06
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\components\wangEditor.vue
 * @Company: 沃尔玛
 * https://www.wangeditor.com/v5/menu-config.html#%E9%80%9A%E7%94%A8%E6%96%B9%E6%B3%95
-->
<template>
  <div ref="editor" class="editor-wrapper" />
</template>

<script>
import WEditor from 'wangeditor'
import { replaceImgSrc } from '@/utils/processingData.js'

export default {
  name: 'WangEditor',
  model: {
    prop: 'value',
    event: 'htmlChange'
  },
  props: {
    // 是否禁止
    disabled: {
      type: Boolean,
      default: false
    },
    // html得内容
    value: {
      type: String,
      default: ''
    },
    // 上传的接口函数，(上传的文件，调用同步图片到文本域，【addFun图片的url】)
    uploadFun: {
      type: Function,
      default(){
        return (img, addFun) => {}
      }
    },
    config: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      editor: null
    }
  },
  watch: {
    value(html){
      this.setHtml(html)
    }
  },
  mounted() {
    this.initEditor()
    this.setHtml(this.value)
  },
  methods: {
    // 设置html到编辑器
    setHtml(val) {
      this.editor.txt.html(replaceImgSrc(val))
    },
    // 创建初始化
    initEditor() {
      this.editor = new WEditor(this.$refs.editor)
      const config = {
        height: 300, // 文本框的高度
        placeholder: '', // 提示语
        showFullScreen: false, // 配置全屏
        pasteFilterStyle: false, // 关闭从其他网站粘贴过来的样式处理
        uploadImgShowBase64: false, // base 64 存储图片
        showLinkImg: false, // 关闭通过图片地址添加图片
        menus: [], // 默认所有的
        zIndex: 999,
        onchange: (html) => {
          this.$emit('htmlChange', replaceImgSrc(html, false)) // 将内容同步
        },
        customUploadImg: this.uploadFun
      }
      Object.assign(this.editor.config, config, this.config)
      this.editor.create()
      if (this.disabled) this.editor.disable()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
